<template>
  <div class="container">
    <div class="main">
      <div class="top">
        <div class="top1">
          <div class="left">
            <div class="left-img">
              <img src="../../assets/10.jpg" alt="" />
            </div>
            <div class="left-list">
              <h3>订单提交成功!去付款咯~</h3>
              <p>收货信息:xxx 132xxxx4567 xxxxx</p>
            </div>
          </div>
          <div class="right">
            <h2>应付总金额:317元</h2>
          </div>
        </div>
        <div class="top2">
          <ul>
            <h4>订单详情</h4>
            <li>订单号:23005882725</li>
            <li>票品信息:【西安站】[薛之谦]《天外来物》巡回演唱会</li>
            <li>演出场次:2023.07.02 19:30:00</li>
            <li>票面价格:317元</li>
            <li>数量:1张</li>
          </ul>
          <div>
            <div>票价有波动,请在10分钟内完成支付哦~~~</div>
            <div class="time">还剩9:46</div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <b>请选择支付方式</b>
        <div>
          <button>
            <img src="../../assets/65.jpg" alt="" />
          </button>
          <button>
            <img src="../../assets/64.jpg" alt="" />
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
}
.main {
  margin: 0 auto;
  flex-direction: column;
  background-color: #fff;
  width: 1160px;
}
.main {
  > .top {
    > .top1 {
      display: flex;
      justify-content: space-between;
      > .left {
        display: flex;
        justify-content: space-between;
        height: 100px;
        > .left-img {
          margin: 20px;
          > img {
            width: 50px;
            height: 50px;
            padding-left: 10px;
            padding-bottom: 10px;
            border-radius: 50%;
          }
        }
        > .left-list {
          margin-top: 20px;
          margin-left: 23px;
          > p {
            font-size: 6px;
          }
        }
      }
      > .right {
        color: red;
        margin-right: 80px;
        > h2 {
          margin-top: 20px;
        }
      }
    }
    > .top2 {
      display: flex;
      justify-content: space-between;
      height: 140px;
      margin-top: 20px;
      position: relative;
      > ul {
        list-style: none;
        font-size: 5px;
        margin-left: 75px;
        > li {
          margin: 0;
          padding: 0;
        }
      }
      > div {
        padding-top: 50px;
        color: red;
        position: absolute;
        bottom: 80px;
        right: 0;

        > .time {
          text-align: center;
          margin-top: 10px;
        }
      }
    }
  }
  .bottom {
    margin-top: 20px;

    > span {
      padding: 0px;
    }
    > div {
      margin: 5px;
      display: flex;

      > button {
        margin: 30px;
        border: 1px solid #dee1e6;
        > img {
          width: 90px;
          height: 35px;
        }
      }
    }
  }
}
</style>
